<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!doctype html>
<html class="no-js">
<head>
    <%@ include file="./../common/meta.jsp" %>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
    <link rel="stylesheet" href="../../css/echu.css">
    <style>
        body {
            background: url('../../img/xxbg.png') no-repeat 100% -38px;
            background-size: cover;
        }
    </style>
</head>
<body>
<header data-am-sticky class="am-header am-header-default am-no-layout">

    <div class="am-header-left am-header-nav">

        <a href="../index.jsp" class="">
            <i class="am-header-icon am-icon-chevron-left"></i>
        </a>


    </div>
    <h1 class="am-header-title">形象搭配</h1>

    <style>
        .selPersonImg {
            border: none;
            background: none;
        }
    </style>
    <div class="am-header-right am-header-nav">
        <button type="button" class="selPersonImg" data-am-modal="{target: '#my-alert'}">
            <img src="../../img/addPerson.png" alt="">
        </button>
    </div>

</header>


<div class="am-content" id="echu-main">

    <ul id="menu-box" class="menu1">
        <li class="list1">
            <a href="javascript:;" class="link1">发型<span class="arrow"></span></a>
            <ul class="menu2">
                <li class="list2"><a href="../ecshop/ecshop-list.jsp?type=93&&from=index&local=1">直发</a></li>
                <li class="list2"><a href="../ecshop/ecshop-list.jsp?type=93&&from=index&local=1">烫发</a></li>
                <li class="list2"><a href="../ecshop/ecshop-list.jsp?type=93&&from=index&local=1">染发</a></li>
                <li class="list2"><a href="../ecshop/ecshop-list.jsp?type=93&&from=index&local=1">长发</a></li>
                <li class="list2"><a href="../ecshop/ecshop-list.jsp?type=93&&from=index&local=1">短发</a></li>
            </ul>
        </li>
        <li class="list1">
            <a href="javascript:;" class="link1">服装<span class="arrow"></span></a>
            <ul class="menu2">
                <li class="list2"><a href="../ecshop/ecshop-list.jsp?type=21&&from=index">上衣</a></li>
                <li class="list2"><a href="../ecshop/ecshop-list.jsp?type=21&&from=index">裤子</a></li>
            </ul>
        </li>
        <li class="list1">
            <a href="../ecshop/ecshop-list.jsp?type=112&&from=index" class="link1">鞋子</a>
        </li>
        <li class="list1">
            <a href="../ecshop/ecshop-list.jsp?type=116&&from=index" class="link1">运动</a>
        </li>
        <li class="list1">
            <a href="../ecshop/ecshop-list.jsp?type=114&&from=index" class="link1">饰品类</a>
        </li>
        <li class="list1">
            <a href="../ecshop/ecshop-list.jsp?type=115&&from=index" class="link1">户外类</a>
        </li>
    </ul>


    <%--<div class="am-btn-group-stacked" id="tag-right">--%>
    <%--<a href="../ecshop/ecshop-list.jsp?type=21&&from=index" class="am-btn am-btn-secondary">上衣</a>--%>
    <%--<a href="../ecshop/ecshop-list.jsp?type=21&&from=index" class="am-btn am-btn-secondary">裤子</a>--%>
    <%--<a href="../ecshop/ecshop-list.jsp?type=112&&from=index" class="am-btn am-btn-secondary">鞋子</a>--%>
    <%--<a href="../ecshop/ecshop-list.jsp?type=116&&from=index" class="am-btn am-btn-secondary">运动</a>--%>
    <%--<a href="../ecshop/ecshop-list.jsp?type=115&&from=index" class="am-btn am-btn-secondary">户外类</a>--%>
    <%--<a href="../ecshop/ecshop-list.jsp?type=114&&from=index" class="am-btn am-btn-secondary">饰品类</a>--%>

    <%--</div>--%>


    <%--<div class="am-btn-group-stacked" id="tag-left">--%>
    <%--<a href="../ecshop/ecshop-list.jsp?type=93&&from=index" class="am-btn am-btn-secondary">直发</a>--%>
    <%--<a href="../ecshop/ecshop-list.jsp?type=93&&from=index" class="am-btn am-btn-secondary">烫发</a>--%>
    <%--<a href="../ecshop/ecshop-list.jsp?type=93&&from=index" class="am-btn am-btn-secondary">染发</a>--%>
    <%--<a href="../ecshop/ecshop-list.jsp?type=93&&from=index" class="am-btn am-btn-secondary">长发</a>--%>
    <%--<a href="../ecshop/ecshop-list.jsp?type=93&&from=index" class="am-btn am-btn-secondary">短发</a>--%>
    <%--</div>--%>

    <div class="person" id="person-box">
        <img src="" alt="" id="userModal">
    </div>

</div>


<div class="overlay">
    <%--帽子--%>
    <div id="renren" style="height: 400px">
        <div class="hat" id="hat">
            <img src="" id="img1">
        </div>
        <%--发型--%>
        <div class="hairstyle" id="hairstyle">
            <img src="" id="img2">
        </div>
        <%--上衣--%>
        <div class="coat" id="coat">
            <img src="" id="img3">
        </div>
        <%--裤子--%>
        <div class="pants" id="pants">
            <img src="" id="img4">
        </div>
        <%--鞋--%>
        <div class="shoes" id="shoes">
            <img src="" id="img5">
        </div>
    </div>
</div>


<div class="btn-box xxSelBtn-box">
    <input type="button" class="xxSelBtn" name="sub" value="生成方案" id="createPlan">
    <input type="button" class="xxSelBtn" name="sub" value="保存图片" id="saveImage">
    <input type="button" class="xxSelBtn" name="sub" value="一键下单" id="order">
    <input type="button" class="xxSelBtn" name="sub" value="清除" id="clear">
</div>

<div class="am-modal am-modal-alert" tabindex="-1" id="modal-alert">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">提示</div>
        <div class="am-modal-bd"></div>
        <div class="am-modal-footer">
            <span class="am-modal-btn">确定</span>
        </div>
    </div>
</div>


<div class="am-modal am-modal-alert" tabindex="-1" id="planNameModel">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">方案名称</div>
        <input type="text" name="planName" id="planName" class="am-form-field" required>
        <div class="am-modal-footer">
            <span class="am-modal-btn" id="planSubmit">确定</span>
            <span class="am-modal-btn">取消</span>
        </div>
    </div>
</div>
<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">选模特</div>
        <div class="am-modal-bd">
            <ul class="sel-mt" id="superModal">
            </ul>
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" id="modalSelect">确定</span>
            <span class="am-modal-btn">取消</span>
        </div>
    </div>
</div>

<%@ include file="./../common/footerNav.jsp" %>
<%@ include file="./../common/footer.jsp" %>
<script src="../../lib/draggabilly/draggabilly.pkgd.min.js"></script>
<script src="../../js/xxdp/xxdp.js"></script>
<script src="../../lib/canvas/canvas.js"></script>
<script src="../../js/xxdp/img1.js"></script>
<script src="../../js/xxdp/img2.js"></script>
<script src="../../js/xxdp/img3.js"></script>
<script src="../../js/xxdp/img4.js"></script>
<script src="../../js/xxdp/img5.js"></script>


<script id="super-template" type="text/x-handlebars-template">
    {{#each this}}
    <li class="am-g">
        <label class="am-radio-inline">
            <input type="radio" name="superInput" class="service" value="{{id}}" data="{{imageurl}}">
            <img src="{{imageurl}}" alt="..." class="am-img-thumbnail" data="{{id}}">
        </label>
    </li>
    {{/each}}
</script>


<script type="text/javascript">


    var from = "<%=request.getParameter("from")%>";
    var user = JSON.parse(localStorage.getItem("user"));


    var userModal = localStorage.getItem("userModal");
    if (userModal != null) {
        $("#userModal").attr("src", userModal);
    } else {
        if (user.superModal != null) {
            $("#userModal").attr("src", user.superModal);
        }
    }

    //这一段js写写到这里

    var superModal = "/h5/getSuperModal";
    $.post(superModal, {
        sex: user.sex
    }, function (result) {
        var source = $('#super-template').html();
        var template = Handlebars.compile(source);
        var html = template(result);
        $("#superModal").append(html);

    });

    $("#modalSelect").click(function () {
        var selectId = $("input[name=superInput]:checked").attr("data");
        if (selectId == "" || selectId == null) {
            alert("请选择与您相配的模特");
            return false;
        }
        $("#userModal").attr("src", selectId);
        localStorage.setItem("userModal", selectId);
        window.location.href = "./xxdp.jsp?from=modal";
        $("#my-alert").modal("hide");


    })


    //商品image
    var image = "<%=request.getParameter("image")%>";


    //商品id
    var productId = "<%=request.getParameter("productId")%>";

    //应该传在人体的什么部位
    var bodyType = "<%=request.getParameter("bodyType")%>";


    var type = "<%=request.getParameter("type")%>";


    var type = "<%=request.getParameter("type")%>";

    if (type != "null") {
        var planId = "<%=request.getParameter("planId")%>";
        var url = "/h5/getPlanDetail"
        $.post(url, {
            planId: planId
        }, function (result) {
            for (var i = 0; i < result.length; i++) {
                setImage(result[i].bodyType, result[i].image);
            }

        })

    }

    //加入localstorege

    if (image != "null" && productId != "null") {

        //这里保存到衣厨管理
        var url = "/h5/saveUserYichu";
        $.post(url, {
            product: productId,
            userId: user.id
        }, function (result) {

        })

        var records = JSON.parse(localStorage.getItem("clothes"));
        if (records != null) {
            for (var i = 0; i < records.length; i++) {
                setImage(records[i].bodyType, records[i].image)
            }
        }

        //设置用户本次选择的衣服
        setImage(bodyType, image);
        var record = {
            image: image,
            productId: productId,
            bodyType: bodyType
        }

        if (records != null) {
            records.push(record);
            localStorage.setItem("clothes", JSON.stringify(records));
        } else {
            records = [];
            records.push(record);
            localStorage.setItem("clothes", JSON.stringify(records));
        }
    }


    function setImage(bodyType, image) {
        if (bodyType == 'maozi') {
            $("#hat img").attr("src", image);
        } else if (bodyType == 'tou') {
            $("#hairstyle img").attr("src", image);
        } else if (bodyType == 'sheng') {
            $("#coat img").attr("src", image);
            $("#coat img").attr("style", "width:120px;height: 130px");
        } else if (bodyType == 'tui') {
            $("#pants img").attr("src", image);
        } else if (bodyType == 'xiezi') {
            $("#shoes img").attr("src", image);
        } else {
            //没有
        }
    }


    $("#saveImage").click(function () {
        html2canvas($("#renren"), {
            onrendered: function (canvas) {
                var url = canvas.toDataURL();
                var postUrl = "/editor/base64Image"
                var user = JSON.parse(localStorage.getItem("user"));
                $.post(postUrl, {
                    image: url,
                    userId: user.id
                }, function (result) {
                    if (result.code = "000000") {
                        showalert("保存成功");
                    }

                })
            }
        });

    })

    $("#planSubmit").click(function () {
        var planName = $("#planName").val();
        var records = localStorage.getItem("clothes");
        var records = JSON.parse(records);

        if (planName == null || planName == "") {
            alert("方案名称不能为空");
            return false;
        }


        if (records == null) {
            showalert("请先选择");
            return false;
        } else {
            var ids = "";
            for (var i = 0; i < records.length; i++) {
                ids = ids + records[i].productId + ",";
            }
            var url = "/h5/createPlan";
            $.post(url, {
                products: ids,
                userId: user.id,
                planName: planName
            }, function (result) {
                if (result.code = '000000') {
                    showalert("生成方案成功");
                } else {
                    showalert(result.msg);
                }
            })
        }
    })


    $("#createPlan").click(function () {
        var records = localStorage.getItem("clothes");
        var records = JSON.parse(records);
        if (records == null) {
            showalert("请先选择");
            return false;
        }
        $("#planNameModel").modal("open");
    })


    $("#order").click(function () {
        window.location.href = "../store/store.jsp"
    })

    $("#clear").click(function () {
        localStorage.removeItem("clothes");
        localStorage.removeItem("userModal");
        $("#hat img").attr("src", null);
        $("#hairstyle img").attr("src", null);
        $("#coat img").attr("src", null);
        $("#pants img").attr("src", null);
        $("#shoes img").attr("src", null);

        showalert("清除成功");
        window.location.href = "./xxdp.jsp";
    })


    function showalert(txt) {
        $("#modal-alert").find(".am-modal-bd").text(txt)
                .end()
                .modal("open");
    }

    $(function () {
        $('#menu-box').find('.list1').on('click', function () {
            $(this).toggleClass('active');
            $(this).siblings().removeClass('active');
        });
    })


</script>

</body>
</html>